<template>
	<div class="update-cont" @click="hide">
		<custom-header :title="title" ref="customHeader" :hideRight="true"></custom-header>
		<!-- 手机号码 -->
		<van-field v-model="old_pwd" :type="o_passwordType" required name="old_pwd" label="原始密码" placeholder="原始密码" :rules="old_pwd_rules">
			<template slot="right-icon">
				<span class="solts" @click="switchOPwd">
					<van-icon name="closed-eye" v-if="o_passwordType =='password'" />
					<van-icon name="eye" v-else />
				</span>
			</template>
		</van-field>

		<van-field v-model="new_pwd" :type="new_passwordType" required name="new_pwd" label="新密码" placeholder="新密码" :rules="new_pwd_rules">
			<template slot="right-icon">
				<span class="solts" @click="switchNewPwd">
					<van-icon name="closed-eye" v-if="new_passwordType==='password'" />
					<van-icon name="eye" v-else />
				</span>
			</template>
		</van-field>

		<van-field v-model="re_new_pwd" :type="re_passwordType" required name="re_new_pwd" label="确认新密码" placeholder="确认新密码" :rules="re_pwd_rules">
			<template slot="right-icon">
				<span class="solts" @click="switchRePwd">
					<van-icon name="closed-eye" v-if="re_passwordType==='password'" />
					<van-icon name="eye" v-else />
				</span>
			</template>
		</van-field>
		<div class="confirm" @click="confirm">
			确认
		</div>
	</div>
</template>

<script>
import customHeader from "@/components/custom-header.vue";
export default {
	components: {
		customHeader,
	},
	data() {
		return {
			title: "修改密码",
			old_pwd: "",
			new_pwd: "",
			re_new_pwd: "",
			old_pwd_rules: [],
			new_pwd_rules: [],
			re_pwd_rules: [],
			o_passwordType: "password",
			new_passwordType: "password",
			re_passwordType: "password",
		};
	},
	methods: {
		switchOPwd() {
			console.log(this.o_passwordType);
			this.o_passwordType =
				this.o_passwordType == "password" ? "text" : "password";
		},
		switchNewPwd() {
			this.new_passwordType =
				this.new_passwordType == "password" ? "text" : "password";
		},
		switchRePwd() {
			this.re_passwordType =
				this.re_passwordType == "password" ? "text" : "password";
		},
		confirm() {
			let o = this.old_pwd;
			let n = this.new_pwd;
			let r = this.re_new_pwd;
			if (o.length < 8 || n.length < 8 || r.length < 8) {
				this.$msg.fail("密码长度不应该少于8位数！");
			} else if (n !== r) {
				this.$msg.fail("两次新密码输入不一致！");
			} else {
				// uni.showLoading({
				// 	title: "密码修改中...",
				// });
				this.$toast.loading({
					message: "密码修改中...",
					forbidClick: true,
					duration: 0,
				});
				this.$api.user
					.saveUserPwd({
						Id: localStorage.getItem("userId"), //用户id
						oldPassword: this.old_pwd, //原密码
						newPassword: this.new_pwd, //新密码
					})
					.then((res) => {
						if (res.code > 0) {
							this.$router.push({
								name: "login",
							});
							this.$msg.alert(res.msg);
						}else{
							this.$msg.alert(res.msg);
						}
					})
					.finally(() => {
						this.$toast.clear();
					});
			}
		},
		hide() {
			this.$refs.customHeader.hide();
		},
	},
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
